<template>
  <div class="page role-list">
    <div class="breadcrumb-panel">
      <a href="#" @click.prevent="$router.back()">应用管理</a>&emsp;&gt;&emsp;账号管理
    </div>
    <div class="roles-container">
      <div class="title-panel">
        <p class="app-name">{{ app.name }}</p>
        <el-button type="primary" @click="addRole">分配账号</el-button>
      </div>
      <table class="role-table">
        <thead>
          <tr>
            <th>用户名</th>
            <th>注册时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="roles.length === 0">
            <td colspan="3" class="none-tips">该应用还未分配任何账号</td>
          </tr>
          <template v-else>
            <tr v-for="role in roles" :key="role.username">
              <td>{{ role.username }}</td>
              <td>{{ formatTime(role.create_time) }}</td>
              <td>
                <a href="#" :data-username="role.username" @click.prevent="resetRolePwd">密码重置</a>
                <a href="#" :data-username="role.username" @click.prevent="deleteRole">删除账号</a>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>

    <el-dialog
      :title="flag === 'add' ? '账号分配' : '密码重置'"
      center
      :visible.sync="roleDialog"
      width="400px"
      :close-on-click-modal="false"
      :before-close="closeDialog"
    >
      <p class="app-name">{{ app.name }}</p>
      <el-form
        label-position="top"
        label-width="80px"
        :model="role"
        :rules="rules"
        ref="roleAddForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model.trim="role.username" :readonly="flag === 'reset'"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model.trim="role.password" type="password"></el-input>
        </el-form-item>
        <el-form-item class="appadd-button-item">
          <el-button type="primary" @click="submitRole('roleAddForm')">添加应用</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import dateTool from '../utils/date_tool'
import store from '../utils/store'
import utils from '../utils/index'

export default {
  name: 'RoleList',
  data () {
    return {
      app: { appid: '', name: '' },
      roles: [],
      flag: 'add',
      roleDialog: false,
      role: { username: '', password: '' },
      rules: {
        username: [
          {
            required: true,
            message: '请输入应用名称',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请填写应用描述',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    let app = JSON.parse(store.get('app'))
    if (app) {
      this.app = app

      this.queryRoles() // 获取角色列表
    } else {
      this.$router.replace('/app_list')
    }
  },
  methods: {
    // 查询所有的角色列表
    queryRoles () {
      phax.get('/account_allocation/role/list?appid=' + this.app.appid).then(res => {
        this.roles = Object.freeze(res.roles)
      })
    },
    // 账号分配
    addRole () {
      this.flag = 'add'
      this.roleDialog = true
    },
    // 提交角色信息
    submitRole (formname) {
      this.$refs[formname].validate((valid, obj) => {
        if (valid) {
          phax.post('/account_allocation/role/' + this.flag, { json: {
            appid: this.app.appid,
            username: this.role.username,
            password: this.role.password
          } }).then(res => {
            if (res.code === 1) {
              if (this.flag === 'add') {
                this.queryRoles() // 重新查询角色列表
              }
              this.roleDialog = false
              this.$refs['roleAddForm'].resetFields()
            } else {
              this.$message.error('用户名 ' + this.role.username + ' 已经存在！')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 关闭对话框
    closeDialog (done) {
      this.role = { username: '', password: '' }
      done()
    },
    // 格式化时间
    formatTime (d) {
      return dateTool.format(d, 'yyyy-mm-dd HH:MM:ss')
    },
    // 删除账号
    deleteRole (e) {
      let username = utils.data(e.target, 'username')
      this.$confirm('确认删除 ' + username + ' 账号?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        phax.post('/account_allocation/role/delete', { json: {
          username: username,
          appid: this.app.appid
        } }).then(res => {
          // 删除成功
          this.roles = this.roles.filter(r => r.username !== username)
        })
      }).catch(() => {})
    },
    // 密码重置
    resetRolePwd (e) {
      let username = utils.data(e.target, 'username')
      this.flag = 'reset'
      this.role.username = username
      this.roleDialog = true
    }
  }
}
</script>

<style lang='stylus'>
.role-list {
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;

  .breadcrumb-panel {
    display: flex;
    align-items: center;
    height: 80px;
    border: 1px solid #dedede;
    padding: 0 10px;
  }

  .roles-container {
    margin-top: 15px;
    flex-grow: 1;
    border: 1px solid #dedede;
    padding: 0 10px;
  }

  .title-panel {
    height: 50px;
    display flex;
    justify-content space-between;
    align-items center;
  }

  .app-name {
    font-size: 16px;
  }

  .role-table {
    height 'calc(100% - 50px)' % 1;
    overflow-y auto;
  }

  .none-tips {
    text-align center
  }
}
</style>
